import './App.css';

function App() {
  return (
    <div className="App">
        <header>
            <div className="profile-page sidebar-collapse">
                <nav className="navbar navbar-expand-lg fixed-top bg-primary" color-on-scroll="400">
                    <div className="container">
                        <div className="navbar-translate"><a className="navbar-brand" href="/#" rel="tooltip" data-original-title="" title="">谢志远的个人主页</a>
                            <button className="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-bar bar1"></span><span className="navbar-toggler-bar bar2"></span><span className="navbar-toggler-bar bar3"></span></button>
                        </div>
                        <div className="collapse navbar-collapse justify-content-end" id="navigation">
                            <ul className="navbar-nav">
                                <li className="nav-item"><a className="nav-link smooth-scroll" href="#about">关于</a></li>
                                <li className="nav-item"><a className="nav-link smooth-scroll" href="#skill">技能</a></li>
                                <li className="nav-item"><a className="nav-link smooth-scroll" href="#portfolio">展示</a></li>
                                <li className="nav-item"><a className="nav-link smooth-scroll" href="#experience">经历</a></li>
                                <li className="nav-item"><a className="nav-link smooth-scroll" href="#contact">联系</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </header>
        <div className="page-content">
            <div>
                <div className="profile-page">
                    <div className="wrapper">
                        <div className="page-header page-header-small" filter-color="green">
                            <div className="page-header-image" data-parallax="true"></div>
                            <div className="container">
                                <div className="content-center">
                                    <div className="cc-profile-image"><a href="/#"><img src="./files/csdn.jpg" alt="Image" /></a></div>
                                    <div className="h2 title">谢志远</div>
                                    <p className="category text-white">前端开发工程师</p><a className="btn btn-primary smooth-scroll mr-2  qqqq aos-animate" href="/#contact" zoom="" data-aos-anchor="data-aos-anchor">联系我</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="section" id="about" tabIndex="-1">
                    <div className="container">
                        <div className="card  qqqq aos-animate" eee="" data-aos-offset="10">
                            <div className="row">
                                <div className="col-lg-6 col-md-12">
                                    <div className="card-body">
                                        <div className="h4 mt-0 title">关于</div>
                                        <p>嗨！我是谢志远，一名前端开发工程师。</p>
                                        <p>5年前端开发经验，主要从事web前端开发，具备一定团队管理经验，熟悉主流开发框架、前端（Vue等），对Python、PHP等有所了解，涉猎较广，逻辑思维、沟通能力好。喜欢思考，求知欲望强烈，勇于探索。</p>
                                    </div>
                                </div>
                                <div className="col-lg-6 col-md-12">
                                    <div className="card-body">
                                        <div className="h4 mt-0 title">基本信息</div>
                                        <div className="row">
                                            <div className="col-sm-4"><strong className="text-uppercase">年龄:</strong></div>
                                            <div className="col-sm-8">30</div>
                                        </div>
                                        <div className="row mt-3">
                                            <div className="col-sm-4"><strong className="text-uppercase">邮箱:</strong></div>
                                            <div className="col-sm-8"><a href="mailto:xiezhiyuan289@163.com">xiezhiyuan289@163.com</a></div>
                                        </div>
                                        <div className="row mt-3">
                                            <div className="col-sm-4"><strong className="text-uppercase">QQ:</strong></div>
                                            <div className="col-sm-8">974537977</div>
                                        </div>
                                        <div className="row mt-3">
                                            <div className="col-sm-4"><strong className="text-uppercase">微信:</strong></div>
                                            <div className="col-sm-8">15003873382</div>
                                        </div>
                                        <div className="row mt-3">
                                            <div className="col-sm-4"><strong className="text-uppercase">地址:</strong></div>
                                            <div className="col-sm-8">广东省深圳市</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="section" id="skill" tabIndex="-1">
                    <div className="container">
                        <div className="h4 text-center mb-4 title">专业技能</div>
                        <div className="card  qqqq aos-animate" eee="" data-aos-anchor-placement="top-bottom">
                            <div className="card-body">
                                <div className="row">
                                    <div className="col-md-6">
                                        <div className="progress-container progress-primary"><span className="progress-badge">HTML</span>
                                            <div className="progress">
                                                <div className="progress-bar progress-bar-primary  qqqq aos-animate" data-aos="progress-full" data-aos-offset="10" data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{width: "90%"}}></div><span className="progress-value">80%</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="progress-container progress-primary"><span className="progress-badge">CSS</span>
                                                <div className="progress">
                                                    <div className="progress-bar progress-bar-primary  qqqq aos-animate" data-aos="progress-full" data-aos-offset="10" data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{width: "90%"}}></div><span className="progress-value">80%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col-md-6">
                                        <div className="progress-container progress-primary"><span className="progress-badge">JAVASCRIPT</span>
                                            <div className="progress">
                                                <div className="progress-bar progress-bar-primary  qqqq aos-animate" data-aos="progress-full" data-aos-offset="10" data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style={{width: "75%"}}></div><span className="progress-value">75%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-md-6">
                                        <div className="progress-container progress-primary"><span className="progress-badge">NODE</span>
                                            <div className="progress">
                                                <div className="progress-bar progress-bar-primary  qqqq aos-animate" data-aos="progress-full" data-aos-offset="10" data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{width: "90%"}}></div><span className="progress-value">60%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col-md-6">
                                        <div className="progress-container progress-primary"><span className="progress-badge">Vue</span>
                                            <div className="progress">
                                                <div className="progress-bar progress-bar-primary  qqqq aos-animate" data-aos="progress-full" data-aos-offset="10" data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{width: "90%"}}></div><span className="progress-value">60%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-md-6">
                                        <div className="progress-container progress-primary"><span className="progress-badge">REACT</span>
                                            <div className="progress">
                                                <div className="progress-bar progress-bar-primary  qqqq aos-animate" data-aos="progress-full" data-aos-offset="10" data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style={{width: "90%"}}></div><span className="progress-value">50%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="section" id="portfolio" tabIndex="-1">
                    <div className="container">
                        <div className="h4 text-center mb-4 title">项目展示</div>
                        <div className="tab-content gallery">
                            <div className="tab-pane active">
                                <div className="ml-auto mr-auto">
                                    <div className="row">
                                        <div className="col-md-4">
                                            <div className="cc-porfolio-image img-raised  qqqq" eee="" data-aos-anchor-placement="top-bottom">
                                              <a href="https://hello-cloudbase-5gorgnaga518c1e7-1255305154.ap-shanghai.app.tcloudbase.com/admin" target="gene">
                                                <figure className="cc-effect">
                                                  <img src="./files/GeneAdmin.png" width="100%" alt="GeneAdmin" />
                                                  <figcaption>
                                                      <div className="h4">myAdmin</div>
                                                      <p>基于node 云函数  实现的后台应用</p>
                                                  </figcaption>
                                                </figure>
                                              </a>
                                            </div>
                                        </div>
                                        <div className="col-md-4">
                                            <div className="cc-porfolio-image img-raised  qqqq" eee="" data-aos-anchor-placement="top-bottom"><a href="https://hello-cloudbase-5gorgnaga518c1e7-1255305154.tcloudbaseapp.com/" target="csdn">
                                                    <figure className="cc-effect"><img width="100%" src="./files/csdn.jpg" alt="CSDN"/>
                                                        <figcaption>
                                                            <div className="h4">个人博客</div>
                                                            <p>个人博客与问题总结，博客数量200+，访问量97w+</p>
                                                        </figcaption>
                                                    </figure>
                                            </a></div>
                                        </div>
                                        <div className="col-md-4">
                                            <div className="cc-porfolio-image img-raised  qqqq" eee="" data-aos-anchor-placement="top-bottom"><a href="https://gitee.com/yuanfang289" target="gitee">
                                                    <figure className="cc-effect"><img width="100%" src="./files/gitee.jpg" alt="gitee"/>
                                                        <figcaption>
                                                            <div className="h4">码云</div>
                                                            <p>个人开源项目</p>
                                                        </figcaption>
                                                    </figure>
                                            </a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="section" id="experience" tabIndex="-1">
                    <div className="container cc-experience">
                        <div className="h4 text-center mb-4 title">工作经历</div>
                        <div className="card">
                            <div className="row">
                                <div className="col-md-3 bg-primary" wwwww="">
                                    <div className="card-body cc-experience-header">
                                        <p>2020年04月-至今</p>
                                        <div className="h5">江苏金智教育信息股份有限公司</div>
                                    </div>
                                </div>
                                <div className="col-md-9  qqqq"  wwwww="">
                                    <div className="card-body">
                                        <div className="h5">模块设计师</div>
                                        <p>
                                            </p><ul>
                                                <li>负责统一支付平台整体研发设计工作，保障存量用户正产使用。</li>
                                                <li>负责高校应用服务平台运营中心架构设计、核心功能实现与研发管理。</li>
                                                <li>负责私有云部分产品架构设计与评估。</li>
                                            </ul>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="section" id="project">
                    <div className="container cc-project">
                        <div className="h4 text-center mb-4 title">项目经历</div>
                        <div className="card">
                            <div className="row">
                                <div className="col-md-3 bg-primary  qqqq" right="" wwwww="">
                                    <div className="card-body cc-project-header">
                                        <p>2020年04月-至今</p>
                                        <div className="h5">江苏金智教育信息股份有限公司</div>
                                    </div>
                                </div>
                                <div className="col-md-9  qqqq"  wwwww="">
                                    <div className="card-body">
                                        <div className="h5">运营中心</div>
                                        <p>负责高校应用服务平台运营中心架构设计、详细设计，核心功能模块编码实现以及用户需求分析汇总。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="section" id="contact">
                    <div className="cc-contact-information">
                        <div className="container">
                            <div className="cc-contact">
                                <div className="row">
                                    <div className="col-md-9">
                                        <div className="card mb-0  qqqq" zoom="">
                                            <div className="h4 text-center title">联系我</div>
                                            <div className="row">
                                                <div className="col-md-6">
                                                    <div className="card-body">
                                                        <form action="/#" method="POST" id="emailForm">
                                                            <div className="p pb-3"><strong>欢迎随时联系我
                                                                </strong></div>
                                                          <div className="row mb-3">
                                                                <div className="col">
                                                                    <div className="input-group"><span className="input-group-addon"><i
                                                                                className="fa fa-user-circle"></i></span>
                                                                        <input className="form-control" type="text" name="name"
                                                                            placeholder="名称" required="required" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div className="row mb-3">
                                                                <div className="col">
                                                                    <div className="input-group"><span className="input-group-addon"><i className="fa fa-file-text"></i></span>
                                                                        <input className="form-control" type="text" name="subject" placeholder="主题" required="required"/>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div className="row mb-3">
                                                                <div className="col">
                                                                    <div className="input-group"><span className="input-group-addon"><i
                                                                                className="fa fa-envelope"></i></span>
                                                                        <input className="form-control" type="email" name="_replyto"
                                                                            placeholder="邮箱" required="required" />
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div className="row mb-3">
                                                                <div className="col">
                                                                    <div className="form-group">
                                                                        <textarea className="form-control" name="body" placeholder="说点什么" required="" rows="4"></textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div className="row">
                                                                <div className="col">
                                                                    <button className="btn btn-primary" id="sendEmail">提交</button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div className="col-md-6">
                                                    <div className="card-body">
                                                        <p className="mb-0"><strong>地址 </strong></p>
                                                        <p className="pb-2">深圳市</p>
                                                        <p className="mb-0"><strong>邮箱</strong></p>
                                                        <p><a href="mailto:xiezhiyuan289@163.com">xiezhiyuan289@163.com</a></p>
                                                        <p className="mb-0"><strong>微信 / QQ</strong></p>
                                                        <p className="pb-2">
                                                          15003873382              974537977
                                                          {/* <img width="50%" src="./files/mmqrcode1572838164277.png" />
                                                          <img width="50%" src="./files/qrcode_1572838134403.jpg"/> */}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer className="footer">
            <div className="h4 title text-center">谢志远的个人主页</div>
            <div className="text-center text-muted">
              <ul className="ul-level-0"><li>「<a data-from="10680" href="https://webify.cloudbase.net/" target="_blank" rel="nofollow noopener noreferrer">CloudBase Webify</a> 提供网站托管服务」</li><li>「Powered by <a data-from="10680" href="https://webify.cloudbase.net/" target="_blank" rel="nofollow noopener noreferrer">CloudBase Webify</a>」</li></ul>
            </div>
        </footer>
    </div>
  );
}

export default App;
